import React, { useState, useEffect, useCallback } from 'react';
import { Link, useLocation } from "react-router-dom"
import { Menu } from 'antd';
import menusConfig from "../config/menuConfig"

export default function MyMenu() {
    const [name, setName] = useState("蜗牛")
    const [pathName, setPathName] = useState(["/home"])
    const fun = useCallback(() => {
        return name.split("").join("-")
    }, [name])
    const location = useLocation()
    useEffect(() => {
        setPathName([location.pathname])
    }, [location])

    /**
     * initMenu进行菜单初始化
     */
    const initMenu = (list) => {
        // const { role } = JSON.parse(localStorage.getItem("userInfo") || "{}")
        return list.map(item => {
            // if (role.menus.indexOf(item.key) != -1) {
                //判断是否为一级菜单
                if (!item.children) {
                    return (
                        <Menu.Item key={item.key} icon={item.icon}>
                            <Link to={item.key}>{item.title}</Link>
                        </Menu.Item>
                    )
                } else {
                    return (
                        <Menu.SubMenu key={item.key} icon={item.icon} title={item.title}>
                            {initMenu(item.children)}
                        </Menu.SubMenu>
                    )
                }
            // }
        })
    }
    return (
        <>
            <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={pathName}
                selectedKeys={pathName}
                defaultOpenKeys={["/product", "/datav"]}
            >
                {initMenu(menusConfig)}
            </Menu>
        </>

    )
}
